const path = require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin =  require('clean-webpack-plugin');
module.exports = {
    entry: './web_src/index.js', //入口文件
    output: {
        //path: path.resolve(__dirname, 'dist'),
        path: path.resolve(__dirname, 'target/classes/static'),
        filename: 'result.js'
    },
    devServer: {
        contentBase: path.join(__dirname, ""),
        compress: true,
        port: 8899
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                  [
                      "@babel/preset-env",
                      {
                          "modules": "commonjs",
                          "targets": {
                              "node": "current"
                          }
                      }
                  ]
              ]
            }
          },
          {
            test: /\.(scss|css|less)$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
              'postcss-loader',
              'sass-loader',
              'less-loader',
            ],
          }, {
                test: /\.(jpeg|png|jpg)$/,
                use: [{
                    loader: 'file-loader'
                }]
            },
            {
                test: /\.(eot|woff2?|ttf|svg)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        name: "[name]-[hash:5].min.[ext]",
                        limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                        publicPath: "fonts/",
                        outputPath: "fonts/"
                    }
                }]
            }, {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader'
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "[id].css"
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.NamedModulesPlugin(),
        new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录
        new HtmlWebpackPlugin({
            template: './index2.html',               // 会与根目录下的index.html相关联，把根目录下index的东西都放到生成的HTML中
            filename: 'index.html',         // 生成的HTML名，路径为上面output中的path，不填默认是index.html
            title: '测试webpack',
            hash: true,
            chunks: ['main'],  // 多页面分别引入自己的js
            minify: {
                collapseWhitespace: true,  //折叠空白区域 也就是压缩代码
                removeComments: true, //移除HTML中的注释
            }
        })
    ],
    optimization: {
    }
};